<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>PrimeFaces</title>
            </f:facet>
        </h:head> 

        <h:body>
            <ui:composition template="./template.xhtml">
                <ui:define name="top">

                </ui:define>
                <ui:define name="left">
                    <h:form >
                        <p:menu my="true" style="width:200px">
                            <p:submenu label="Navigation Véhicle" >  
                                <p:menuitem value="Les véhicules" action="#{redirectionBean.getRedirectionAccueilVehicule}" icon="ui-icon-home"
                                            styleClass="#{view.viewId == '/accueilVehicule.xhtml' || 
                                                          view.viewId == '/creerUnVehicule.xhtml' || 
                                                          view.viewId == '/detailVehicule.xhtml' || 
                                                          view.viewId == '/editerUnlVehicule.xhtml' ? 'ui-state-active' : ''}"
                                            />  
                            </p:submenu>
                            <p:submenu label="Navigation Catégorie">  
                                <p:menuitem value="Gestion des modèles" action="#{redirectionBean.getRedirectionGestionMarque}" icon="ui-icon-suitcase" 
                                            styleClass="#{ view.viewId == '/gestionMarque.xhtml' ? 'ui-state-active' : ''}"
                                            />  
                            </p:submenu>  
                            <p:submenu label="Navigation Réglage">  
                                
                            </p:submenu>  
                        </p:menu> 
                    </h:form>
                </ui:define>
                <ui:define name="content">

                    <h:form id="formMessage">
                        <p:growl id="message" />
                    </h:form>
                    <h:form id="formeTreeGestionDesMarque">
                        <p:panel header="Employé" style="width: 95%">
                            <f:facet name="header">
                                Gestion des Marques
                                <p:menuButton  style="float: right;" value="Créer">  
                                    <p:menuitem value="Une Marque"  update=":formNouveauMarque"
                                                immediate="true"
                                                action="#{gestionVehiculeBean.initialisationSaisie}"
                                                oncomplete="nouveauMarqueDialog.show()" icon="ui-icon-suitcase"/> 
                                    <p:menuitem value="Un Modèle"  
                                                immediate="true"
                                                update=":formNouveauModel"
                                                action="#{gestionVehiculeBean.initialisationSaisie}"
                                                oncomplete="nouveauModelDialog.show()" icon="ui-icon-lightbulb"/> 
                                     <p:menuitem value="Un type de modèle" icon="ui-icon-pin-w" 
                                                update=":formNouveauTypeModel"
                                                immediate="true"
                                                action="#{gestionVehiculeBean.initialisationSaisie}"
                                                oncomplete="nouveauTypeModelDialog.show()"
                                                />  
                                    
                                </p:menuButton>

                                <p:commandButton id="viewDetailTravailleur" 
                                                 style="float: right;" value="Voir détails" icon="ui-icon-search"
                                                 update=":formeTreeGestionDesMarque:documentPanelDetailElement" oncomplete="documentDialogDetailElement.show()"
                                                 >
                                </p:commandButton>
                            </f:facet>
                            <p:treeTable id="tableTeeElement" value="#{gestionVehiculeBean.root}"  var="elementArbre"  
                                         selection="#{gestionVehiculeBean.selectedNode}" selectionMode="single" 
                                         
                                         >  

                                <f:facet name="header">  
                                    Liste des Marques, Modèle, Type de modèle

                                </f:facet>  

                                <p:column style="width:50%" >  
                                    <f:facet name="header">  
                                        Nom  
                                    </f:facet>  
                                    <h:outputText value="#{elementArbre.nomElement}" style="font-weight:bold"/>  
                                </p:column>                            

                                <p:column style="width:40%">  
                                    <f:facet name="header">  
                                        Type  
                                    </f:facet>  
                                    <h:outputText value="#{elementArbre.nameTypeElement}" />  
                                </p:column> 

                            </p:treeTable> 

                        </p:panel>
                        <p:dialog id="dialogDetailElement" header="Détails" 
                                  resizable="false" hideEffect="explode" showEffect="slide" widgetVar="documentDialogDetailElement" >  
                            <p:outputPanel id="documentPanelDetailElement" >  
                                <h:panelGrid  columns="2" cellpadding="5" rendered="#{not empty gestionVehiculeBean.selectedNode}">  
                                    <h:outputLabel for="name" value="Name: " />  
                                    <h:outputText id="name" value="#{gestionVehiculeBean.selectedNode.data.nomElement}" style="font-weight:bold" /> 
                                    <h:outputLabel for="type" value="Type :" />  
                                    <h:outputText id="type" value="#{gestionVehiculeBean.selectedNode.data.nameTypeElement}" style="font-weight:bold" />  
                                </h:panelGrid>  
                            </p:outputPanel>  
                        </p:dialog> 
                    </h:form>
                    <p:dialog header="Créer une marque" widgetVar="nouveauMarqueDialog" resizable="false" id="nouveauMarqueDialogId"  
                              hideEffect="explode" showEffect="slide" >  
                        <h:form id="formNouveauMarque">
                            <h:panelGrid columns="2">
                                <h:outputLabel value="Nom de la marque" for="inputMarque" />
                                <p:inputText id="inputMarque" value="#{gestionVehiculeBean.cvMarque.marque}" 
                                             title="marque" required="true" 
                                             />
                                <h:outputText />
                                <p:commandButton value="Créer" icon="ui-icon-check"
                                                 action="#{gestionVehiculeBean.creerMarque}"
                                                 update=":formMessage:message, :formNouveauMarque, :formeTreeGestionDesMarque:tableTeeElement"
                                                 oncomplete="handleCreerMarqueRequest(xhr, status, args)"
                                                 />                        
                            </h:panelGrid>
                        </h:form>
                    </p:dialog>

                    <p:dialog header="Créer un modèle" widgetVar="nouveauModelDialog" resizable="false" id="nouveauModelDialogId"  
                              hideEffect="explode" showEffect="slide" >  
                        <h:form id="formNouveauModel">
                            <h:panelGrid columns="2">
                                <p:outputLabel value="Marque :" for="marqueListe" />
                                <p:selectOneMenu id="marqueListe" style="width:200px" required="true" value="#{gestionVehiculeBean.cvMarque}" converter="marqueConverter">  
                                    <f:selectItem itemLabel="Selectionne mission" itemValue="" />  
                                    <f:selectItems value="#{gestionVehiculeBean.listeMarque}" var="marque" itemLabel="#{marque.marque}" itemValue="#{marque}"/>  

                                </p:selectOneMenu>  

                                <h:outputLabel value="Nom du modèle" for="inputmodel" />
                                <p:inputText id="inputmodel" value="#{gestionVehiculeBean.cvModel.model}" 
                                             title="Modele" required="true" 
                                             />
                                <h:outputText />
                                <p:commandButton value="Créer" icon="ui-icon-check"
                                                 action="#{gestionVehiculeBean.creerModele}"
                                                 update=":formMessage:message, :formNouveauModel, :formeTreeGestionDesMarque:tableTeeElement"
                                                 oncomplete="handleCreerModelRequest(xhr, status, args)"
                                                 />                        
                            </h:panelGrid>
                        </h:form>
                    </p:dialog>
                    <p:dialog header="Créer un type de modèle" widgetVar="nouveauTypeModelDialog" resizable="false" id="nouveauTypeModelDialogId"  
                              hideEffect="explode" showEffect="slide"  >  
                        <h:form id="formNouveauTypeModel">
                            <h:panelGrid columns="2">
                                <p:outputLabel value="Marque :" for="marqueListe2" />
                                <p:selectOneMenu id="marqueListe2" style="width:200px" required="true" value="#{gestionVehiculeBean.cvMarque}" converter="marqueConverter">  
                                    <f:selectItem itemLabel="Selectionne marque" itemValue="" />  
                                    <f:selectItems value="#{gestionVehiculeBean.listeMarque}" var="marque" itemLabel="#{marque.marque}" itemValue="#{marque}"/>  
                                    <p:ajax update="modelliste"  
                                            listener="#{gestionVehiculeBean.handleMarqueChange}" />  
                                </p:selectOneMenu>  
                                
                                <p:outputLabel value="Modèle :" for="modelliste" />
                                <p:selectOneMenu id="modelliste" style="width:200px" required="true" value="#{gestionVehiculeBean.cvModel}" converter="modeleConverter">  
                                    <f:selectItem itemLabel="Selectionner modèle" itemValue="" />  
                                    <f:selectItems value="#{gestionVehiculeBean.modelListeHand}" var="modele" itemLabel="#{modele.model}" itemValue="#{modele}" />  
                                    
                                </p:selectOneMenu> 
                                
                                <h:outputLabel value="Nom du type de modèle" for="inputTypeModele" />
                                <p:inputText id="inputTypeModele" value="#{gestionVehiculeBean.cvTypemodel.model}" 
                                             title="Type de modèle" required="true" 
                                             />
                                <h:outputText />
                                <p:commandButton value="Créer" icon="ui-icon-check"
                                                 action="#{gestionVehiculeBean.creerTypeModele}"
                                                 update=":formMessage:message, :formNouveauTypeModel, :formeTreeGestionDesMarque:tableTeeElement"
                                                 oncomplete="handleCreerTypeModeleRequest(xhr, status, args)"
                                                 />                        
                            </h:panelGrid>
                        </h:form>
                    </p:dialog>
                    <script type="text/javascript">
                        function handleCreerMarqueRequest(xhr, status, args) {
                            if (args.validationFailed || !args.status) {
                                //alert(args.message);
                            } else {
                                nouveauMarqueDialog.hide();

                            }
                        }
                        function handleCreerModelRequest(xhr, status, args) {
                            if (args.validationFailed || !args.status) {
                                //alert(args.message);
                            } else {
                                nouveauModelDialog.hide();

                            }
                        }
                        function handleCreerTypeModeleRequest(xhr, status, args) {
                            if (args.validationFailed || !args.status) {
                                //alert(args.message);
                            } else {
                                nouveauTypeModelDialog.hide();

                            }
                        }
                    </script>
                </ui:define>
            </ui:composition>
        </h:body>

    </f:view>
</html>

